<template>
	<NavBar :obj="{ title: '支付订单', backgroundColor: 'transparent', color: '#000000' }" />

	<view class="container">
		<view class="top">
			<view class="amount-title">实付金额</view>
			<view :class="{ rmb: checked != 'hds' }" class="amount flex items-center justify-center">
				{{ checked == 'hds' ? info.order?.hds_amount : info.order?.real_amount }}
				<view class="hands" v-if="checked == 'hds'">
					<text class="tips">HDS价</text>
				</view>
			</view>
			<view class="overtime flex items-center justify-center">
				<text>支付剩余时间</text>

				<up-count-down :time="info.order?.surplus_time" format="HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="time">
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds }}</text>
						</view>
					</view>
				</up-count-down>
			</view>
		</view>

		<view class="pay_mode">
			<up-radio-group v-model="checked" iconPlacement="right" size="20" iconSize="18">
				<block v-for="(item, index) in info.method" :key="index">
					<up-radio :name="item.pay_way" :activeColor="theme?.themeColor" v-if="item.pay_way != 'alipay'">
						<template #label>
							<view class="item flex">
								<image :src="imgUrl + item.icon" class="icon"></image>
								<view class="top flex flex-col">
									<view class="text">
										{{ item.title }}
										<text v-if="item.tip" style="font-size: 20rpx">{{ item.tip }}</text>
									</view>
									<view class="bom">
										{{ item.pay_way == 'hds' ? '当前余额' : '使用' + item.title + '支付' }}
										<text v-if="item.pay_way == 'hds'">{{ item.balance }}</text>
									</view>
								</view>
							</view>
						</template>
					</up-radio>
				</block>
			</up-radio-group>
		</view>
	</view>

	<up-popup v-model:show="payPasswordOpen" :round="10" :closeable="true">
		<view class="pay-password">
			<view class="top flex flex-col items-center justify-between">
				<view class="title">请输入支付密码</view>
				<view class="desc">支付金额</view>
				<view class="total flex items-center">
					{{ info.order?.real_amount }}
				</view>
			</view>

			<view class="inps">
				<input password class="inp" placeholder="输入支付密码" placeholder-class="place-inp" v-model="pay_password" />
			</view>
		</view>

		<view class="tm-btn" @click="confirmPayment">
			<text>确认</text>
		</view>
	</up-popup>

	<view class="btn-container" @click="payment">
		<view class="btn">确认支付</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';

	import { port, imgUrl, hint, goIndex, loading, closeLoading } from '/service/port';
	import { useThemeStore } from '@/stores/theme';

	const theme = useThemeStore();

	const id = ref('');
	const info = ref('');
	const timeData = ref({});
	const onChange = (e) => {
		timeData.value = e;
	};

	const checked = ref('');

	const isShow = ref(false);
	const payPasswordOpen = ref(false);
	const pay_password = ref('');
	onLoad((e) => {
		if (e.id) {
			id.value = e.id;
		}
	});

	onShow(() => {
		!isShow.value ? getOrderPayment() : '';
	});

	function payment() {
		if (checked.value != 'wechat') {
			payPasswordOpen.value = true;
		}
	}

	async function confirmPayment() {
		let code = '';
		if (checked.value != 'wechat') {
			if (!pay_password.value) {
				hint('请填写支付密码');
				return false;
			}
			payPasswordOpen.value = false;
			loading();
		} else {
			loading();
			const loginRes = await uni.login({
				provider: 'weixin',
				onlyAuthorize: true
			});

			code = loginRes.code;
			// console.log(code);return false;
		}

		let res = await port('confirmPayment', { id: id.value, pay_way: checked.value, pay_password: pay_password.value, code: code });
		await nextTick();
		closeLoading();
		if (checked.value == 'wechat') {
			try {
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					...res.data,
					success: function () {
						isShow.value = true;
						setTimeout(() => {
							isShow.value = false;
							goIndex('/pages/order/pay-success?id=' + id.value);
						}, 200);
					}
				});
				// #endif
			} catch (err) {
				hint('支付失败');
			}
		} else {
			if (res.code == 1) {
				goIndex('/pages/order/pay-success?id=' + id.value);
			}
		}
	}

	async function getOrderPayment() {
		let res = await port('getOrderPayment', { id: id.value });

		info.value = res.data;
		checked.value = res.data.method[0].pay_way;
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.hands {
		margin-top: -25rpx;
		.tips {
			background: $theme-bg-btn-color;
			border-radius: 12rpx 15rpx 15rpx 0rpx;
			font-weight: 400;
			font-size: 23rpx;
			color: #ffffff;
			line-height: 42rpx;
			padding: 0 10rpx;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			margin-left: 6rpx;
		}
	}
	.pay-password {
		padding: 30rpx;
		.top {
			padding-bottom: 50rpx;
			// border-bottom: 1rpx #eee solid;
			.title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
			.desc {
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				margin: 40rpx 0 14rpx 0;
			}
			.total {
				font-weight: 500;
				font-size: 58rpx;
				color: #000000;
				position: relative;
			}
		}
		.middle {
			padding: 30rpx 0 44rpx 0;
			.pay_way {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
			.pay_way_value {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}
		}
		.inps {
			.place-inp {
				font-weight: 400;
				font-size: 28rpx;
				color: #aaaaaa;
			}
			.inp {
				font-size: 28rpx;
				background: #f4f5f8;
				border-radius: 20rpx;
				padding: 25rpx;
			}
		}
	}

	.u-radio-group {
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		gap: 24rpx !important;
	}
	.u-radio {
		background: #ffffff !important;
		border-radius: 20rpx !important;
		padding: 26rpx !important;
		margin: 0 30rpx !important;
	}
	.btn-container {
		position: fixed;
		bottom: 60rpx;
		width: 100%;
		box-sizing: border-box;
		margin: 0 30rpx;
		.btn {
			width: calc(100% - 60rpx);
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			background: $theme-bg-btn-color;
			border-radius: 44rpx;
			padding: 22rpx 0;
			text-align: center;
		}
	}

	.container {
		margin-top: 100rpx;
		.top {
			text-align: center;
			.amount-title {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				margin-bottom: 23rpx;
			}
			.amount {
				font-weight: 500;
				font-size: 68rpx;
				color: #000000;
				margin-bottom: 20rpx;
				position: relative;
			}
			.rmb::before {
				font-size: 42rpx !important;
				color: #000000 !important;
			}
			.overtime {
				> text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-right: 10rpx;
				}
				.time {
					@include flex;
					align-items: center;

					&__custom {
						width: 20px;
						line-height: 20px;
						height: 20px;
						background-color: #dedfe2;
						border-radius: 4px;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;

						&__item {
							color: #333333;
							font-size: 12px;
							text-align: center;
						}
					}

					&__doc {
						color: #333333;
						padding: 0px 2px;
					}

					&__item {
						color: #333333;
						font-size: 15px;
						margin-right: 4px;
					}
				}
			}
		}

		.pay_mode {
			margin-top: 80rpx;
			.item {
				.icon {
					width: 44rpx;
					height: 44rpx;
				}
				.top {
					// margin-top: 5rpx;
					align-items: start;
					margin-left: 15rpx;
					.text {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						margin-bottom: 20rpx;
					}
					.bom {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;

						> text {
							color: #fb3204;
						}
					}
				}
			}
		}
	}
</style>
